// 日历
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof(timer));
console.dir(timer);

// 仿京东密码框
var lock01 = document.getElementById('lock01');
var pwd = document.getElementById('pwd')
var flag = 0;
lock01.onclick = function(){
    if(flag == 0){
        pwd.type = 'text';
        lock01.src = "images/unlock.png";
        flag = 1;
    }
    else{
        lock01.src = "images/lock.png";
        pwd.type = 'password';
        flag = 0;
    }
}

var box02 = document.getElementById('box02');
box02.onclick = function(){
    this.style.backgroundColor = 'purple';
    console.log('test');
}

var btn01 = document.querySelector('.close-btn');
var box03 = document.querySelector('.box03');
btn01.onclick = function(){
    box03.style.display = 'none';
}


// 输入框焦点

var input01 = document.getElementById('input01');
input01.onfocus = function(){
    console.log('onfocus');
    if(this.value === '手机'){
        this.value = '';
    }
    this.style.color = '#333';
}

input01.onblur = function(){
    console.log('onblur');
    if(this.value === ''){
        this.value = '手机';
    }
    this.style.color = '#999';
}


// 密码位数

var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function(){
    if(this.value.length < 6 || this.value.length > 16){
        console.log('error');
        message.className = 'message wrong';
        message.innerHTML = '位数不符合要求';
    }
    else{
        console.log('bingo');
        message.className = 'message right';
        message.innerHTML = '输入正确';
    }
}

var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        console.log('成功绑定5个按钮');
        for(var j = 0; j < btns.length; j++){
            btns[j].style.backgroundColor = '';
        }
        this.style.backgroundColor = 'pink';
    }
}

var imgs = document.querySelector('.baidu').querySelectorAll('img');
for(var i = 0; i < imgs.length; i++){
    imgs[i].onclick = function(){
        console.log('成功绑定4张图片');
        document.body.style.backgroundImage = 'url('+ this.src + ')';
    }
}

// 表格 鼠标停留变色 高亮
let trs = document.querySelector('tbody').querySelectorAll('tr');
for(let i = 0; i < trs.length; i++){
    trs[i].onmouseover = function(){
    this.className = 'bg';
    }
    trs[i].onmouseleave = function(){
        this.className = '';
        }

}

// 获取全选按钮
var j_cbAll = document.getElementById('j_cbAll');
// 获取tbody中的按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
var span = document.querySelector('span')

// 注册事件
// 第一件事：将“点击全选按钮之后它的状态”和“tbody中按钮的状态”关联：若j_cbAll亮/暗（属性checked: true/false;），则大家一起亮/暗（属性checked: true/false;）
j_cbAll.onclick = function(){
    span.innerHTML = "取消";
    for(var i = 0; i < j_tbs.length; i++){
        j_tbs[i].checked = this.checked;
    }
}
// 第二件事：将“点击tbody中按钮之后它们的状态”和“全选按钮的状态”关联
for(var i = 0; i < j_tbs.length; i++){
    j_tbs[i].onclick = function(){
        for(var i = 0; i < j_tbs.length; i++){
            if(!j_tbs[i].checked){
                j_cbAll.checked = false;
                span.innerHTML = "全选";
                break;
            }
            j_cbAll.checked = true;
            span.innerHTML = "取消";
        }
    }
}

// 案例：tab 
var tab_list = document.querySelector('.tab-list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for(var i = 0; i < lis.length; i++){
    lis[i].setAttribute('index',i);
    lis[i].onclick = function(){
        console.log('onclick succeed');
        for(var i = 0; i < lis.length; i++){
            lis[i].className = '';
        }
        this.className = 'current';
        var index = this.getAttribute('index');
        console.log(index);
        for(var i = 0; i < lis.length; i++){
            items[i].style.display = 'none';
        
        }
        items[index].style.display = 'block';
    }

}


var li = document.createElement('li');
var ul = document.querySelector('.ul01');
ul.appendChild(li);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

// 案例：留言评论
//-新增功能：删除评论
var ul02 = document.querySelector('.ul02');
var btn02 = document.querySelector('.btn02');
var text02 = document.querySelector('.text02');
btn02.onclick = function(){
    if(text02.value == ''){
        alert("You haven't input");
    }
    else{
        var li02 = document.createElement('li');
        li02.innerHTML = text02.value + "<a href='javascript:;'>删除</a>";
        ul02.insertBefore(li02,ul02.children[0]);
    }
}
var as = document.querySelectorAll('a');
console.log('delete succeed1');
for(var i = 0; i < as.length; i++){
    as[i].onclick = function(){
        console.log('delete succeed2');
        ul02.removeChild(this.parentNode);
    }
}


// 删除元素
var ul03 = document.querySelector('.ul03');
var btn03 = document.querySelector('.btn03');
btn03.onclick = function(){
    if(ul03.children.length == 0){
        this.disabled = true;
    }
    else{
ul03.removeChild(ul03.children[0]);
    }
}

// 克隆节点
var ul04 = document.querySelector('.ul04');
var lili04 = ul04.children[0].cloneNode();
ul04.appendChild(lili04);
var lili04_2 = ul04.children[0].cloneNode(true);
ul04.appendChild(lili04_2);

// 动态添加和删除表格的元素
var datas = [{
    userName: '甲',
    subject:'JS' ,
    grade:'100'
    },{
    userName: '乙',
    subject:'JS' ,
    grade:'99'
    },{
    userName: '丙',
    subject:'JS' ,
    grade:'98'
    },{
    userName: '丁',
    subject:'JS' ,
    grade:'97'
    }];

var tbody02 = document.querySelector('.tbody02');
console.log(tbody02);
for(var i = 0; i < datas.length; i++){
    var tr = document.createElement('tr');
    tbody02.appendChild(tr);
    for(var k in datas[i]){
        var td = document.createElement('td');
        // datas[i][k]是对象中的属性值
        td.innerHTML = datas[i][k];
        tr.appendChild(td);
    }
    var td = document.createElement('td');
    td.innerHTML = '<a href="javascript:;">删除</a>';
    tr.appendChild(td);
}
// 表格的删除功能
var as02 = document.querySelectorAll('a');
for(var i = 0; i < as02.length; i++){
    as02[i].onclick = function(){
        tbody02.removeChild(this.parentNode.parentNode);
    }
}

// 注册事件的新方法：监听
var btn04 = document.querySelector('.btn04');
btn04.addEventListener('click',function(){
    alert('addEventListener is useful!');
})
btn04.addEventListener('click',function(){
    alert('addEventListener can band to more than one thing, like this!');
})

var btn05 = document.querySelector('.btn05');
btn05.addEventListener('click',fn01)
function fn01(){
    alert('You can only see me once.');
    btn05.removeEventListener('click',fn01);
}

// 事件捕获和事件冒泡
function fnSon(){
    alert('I am son.');
}
function fnFather(){
    alert('I am father.');
}

var son01 = document.querySelector('.son01');
son01.addEventListener('click',fnSon,true)
var father01 = document.querySelector('.father01');
father01.addEventListener('click',fnFather,true)

var son02 = document.querySelector('.son02');
son02.addEventListener('click',fnSon,false)
var father02 = document.querySelector('.father02');
father02.addEventListener('click',fnFather,false)

// 事件对象
var box04 = document.querySelector('.box04');
console.log('event succeed1');

// box04.onclick = function(event){
//     console.log(event);
//     console.log('event succeed2');
// }
// console.log('event succeed3');

// box04.addEventListener('click',fnBox04)
// function fnBox04(){
//     alert('wuhu')
// }

function fnBox04(){
    alert('I am father.');
}
var box04 = document.querySelector('.box04');
father02.addEventListener('click',fnFather,false)
